<template>
  <ul class="bottomNav">
    <li>
      <router-link to="/" exact>
        <i class="iconfont">&#xe65d;</i>
        首页
      </router-link>
    </li>
    <li>
      <router-link to="/find">
        <i class="iconfont">&#xe618;</i>
        发现
      </router-link>
    </li>
    <li>
      <router-link to="/fenlei">
        <i class="iconfont">&#xe616;</i>
        分类
      </router-link>
    </li>
    <li>
      <router-link to="/mine">
        <i class="iconfont">&#xe649;</i>
        我的
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: "BottomNav",
  data() {
    return {};
  }
};
</script>

<style lang="less" scoped>
body {
  // padding-bottom: 100px;
}
.bottomNav {
  padding: 10px 0;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 10rem;
  box-sizing: border-box;
  li {
    float: left;
    width: 2.5rem;
    // margin: 5px 25px;
    text-align: center;
    a {
      font-size: 28/75rem;
      font-family: "平方中等";
      color: #808080;
      i {
        display: block;
        font-size: 46/75rem;
      }
    }
    .active {
      color: #ff406f;
    }
  }
}
</style>



